<template>
	<!-- <view class="content">
	    <view class="ad-view">
	      <ad adpid="1111111111" @load="onload" @close="onclose" @error="onerror"></ad>
	    </view>
	  </view> -->
	<view class="home-list wow fadeIn">
		<view class="prompt">点击文字、按钮都能进行复制</view>
		<!-- <view class="prompt">奥运加油！中国腾飞！</view> -->
		<view class="prompt">诸君顺利！</view>
		<view class="btn copyall" @click="copyall()">复制所有</view>
		<ul>
			<li v-for="(item,index) in renderData" :key='item'>
				<view class="text" @click="copy(item,index+1)">
					<strong :class="item=='暂无' ? 'notcontent': ''">{{index+1}}.{{item}}</strong>
				</view>
				<view class="btn-wrap">
					<view class="btn" @click="copy(item,index+1)">复制</view>
				</view>
			</li>
		</ul>
		<view class="prompt" style="font-size: 12px;" v-show="add1 != 0">网站访问次数：{{add1}}</view>
		<view class="prompt" style="font-size: 12px;" v-show="copy1 != 0">已提供复制次数：{{copy1}}</view>

		<uni-section title="" type="line" name="asdasdasa">
			<uni-collapse>
				<uni-collapse-item title="如果对您有帮助,可以请我喝杯咖啡" :show-animation="true">
					<view class="content prompt">您的支持是我更新的动力</view>
					<view v-for="(item, index) in imgList" :key="index" @click="previewImg(index,imgList)" @longpress="previewImg(index,imgList)"
						class="image-box">
						<image :src="item.src" mode="aspectFit" class="image" />
					</view>
					<!-- <view class="prompt">
						赞赏后您将会出现在本网站
					</view> -->
					<view class="prompt" style="height: 20px;margin-bottom: 10px;margin-top: 10px;">
						长按图片保存,感谢支持
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</uni-section>
		<view v-if="Previewimg==true">
			<img-preview :images="imageUrls" :Previewimg="Previewimg" :current-index="currentIndex"
				@quitPreview="stopPreview()"></img-preview>
		</view>
	</view>
</template>

<script>
	import {
		imglist
	} from '@/static/imglist';
	export default {
		data() {
			return {
				imgList: [],
				Previewimg: false,
				imageUrls: '',
				currentIndex: '',
				add1: 0,
				copy1: 0,
				content: `
				1.天高云淡歌颂金秋
				2.丹桂飘香诗意浓
				3.金秋送福心想事成
				4.丰收时节好运相伴
				5.秋风送爽幸福安康
				6.硕果累累喜悦满怀
				7.阖家团圆其乐融融
				8.五谷丰登福满家园
				9.岁月静好温暖常在
				10.吉祥如意前程似锦
				11.秋叶静美平安喜乐
				12.金风玉露好事成双
				13.华灯初上温暖相伴
				14.秋月明朗幸福长存
				15.稻谷金黄财源广进
				16.枫红似火鸿运当头
				17.云淡风轻自在安然
				18.良辰美景皆如所愿
				19.岁稔年丰家业兴旺
				20.阖家安康福寿绵长
				21.金桂传香喜气盈门
				22.明月寄情美好相伴
				23.秋风拂面烦恼消散
				24.丰收喜悦共享团圆
				25.佳节安康温暖相随
				26.祥瑞金秋福满人间
				27. 爰此秋日永
				28.聊适竹林趣
				29.日出露犹泫
				30.竹深蝉乍喑
				31.弄月吹箫过石湖
				32.冷香摇荡碧芙蕖
				33.贪寻旧日鸥边宿
				34.露湿船头数轴书
				35.地僻门深少送迎
				36.披衣闲坐养幽情
				37.秋庭不扫携藤杖
				38.闲踏梧桐黄叶行
				39.十亩山田近石涵
				40.村居风俗旧曾谙
				41.帘前白艾惊春燕
				42.篱上青桑待晚蚕
				43.云暖采茶来岭北
				44.月明沽酒过溪南
				45.陵阳秋尽多归思
				46.红树萧萧覆碧潭
				47.秋气堪悲未必然
				48.轻寒正是可人天
				49.绿池落尽红蕖却
				50.荷叶犹开最小钱
			 `,
			}
		},
		onLoad() {
			this.imgList = imglist;
			uni.request({
				url: 'https://shinyboy.top/sgapi',
				timeout: 500, // 设置超时时间为0.5秒
			}).then(res => {
				this.add1 = res[1].data.Add
				this.copy1 = res[1].data.Copy
			})
			uni.request({
				url: 'https://shinyboy.top/sgapi/add',
				timeout: 500, // 设置超时时间为0.5秒
			});
		},
		computed: {
			renderData() {
				let reg = /[0-9]{1,3}\.[\u4e00-\u9fa5 0-9 A-Za-z]{1,50}[！]{0,2}/g
				let result = this.content.match(reg)
				return result.map((item, index) => {
					let restr = index + 1 + '.'
					return item.replace(restr, '')
				})
			},
			copyAll() {
				let reg = /[0-9]{1,3}\.[\u4e00-\u9fa5 0-9 A-Za-z]{1,50}[！]{0,2}/g
				let result = this.content.match(reg)
				let tmp = result.map((item, index) => {
					let restr = index + 1 + '.'
					return item.replace(restr, '')
				})
				let str = ""
				tmp.map((item, index) => {
					str = str + (index + 1) + "." + item + "\n"
				})
				return str
			}
		},
		methods: {
			previewImg(current, imgList) {
				console.log(current, imgList)
				this.Previewimg = true;
				const urls = imgList.map(item => item.src);
				this.imageUrls = urls;
				this.currentIndex = current;
			},
			stopPreview() {
				this.Previewimg = false;
			},
			copy(item, index) {

				uni.setClipboardData({
					data: item,
					success: function() {
						uni.showToast({
							icon: 'none',
							title: `第${index}条复制成功`
						});
					}
				});
				uni.request({
					url: 'https://shinyboy.top/sgapi/copy',
					timeout: 500, // 设置超时时间为0.5秒
				});
				this.copy1 = this.copy1 + 1
			},
			copyall() {

				uni.setClipboardData({
					data: this.copyAll,
					success: function() {
						uni.showToast({
							icon: 'none',
							title: `复制成功`
						});
					}
				});
				uni.request({
					url: 'https://shinyboy.top/sgapi/copy',
					timeout: 500, // 设置超时时间为0.5秒
				});
			}
		}
	}
</script>

<style scoped>
	.copyall {
		width: 100rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 10rpx;
	}

	.home-list {
		border: 0.06rem solid #87673a;
		padding: 0.06rem 0.24rem 0.26rem 0.24rem;
		border-radius: 0.09rem;
		margin: 0 0.2rem 0 0.2rem;
		overflow: hidden;
		background-image: url(../../static/img/bg_flower002.16f8a70f.png);
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100% auto;
		background-color: #f1e5d6;
	}

	.text {
		display: flex;
	}

	ul li {
		/* list-style: decimal; */
		display: flex;
		margin-top: 20rpx;
	}

	ul {
		padding-left: 20rpx;
	}

	.text strong {
		font-size: 1rem;
		color: #470800;
		width: 100%;
		line-height: 1.25;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.btn-wrap {
		margin-left: auto;
		display: -webkit-box;
		display: -ms-flexbox;

		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.btn {

		padding: 0.1rem 0.34rem;
		border-radius: 3.6px;
		border: 2px solid #9a5126;
		background-color: #faca00;
		color: #692c00;
		cursor: pointer;
		font-size: .75rem;
		font-weight: 700;
		overflow: hidden;
		text-align: center;
	}

	.prompt {
		text-align: center;
		color: red;
	}

	.addqq {
		text-align: center;
		margin: 0 auto;
		margin-top: 7px;
		width: 160rpx;
		height: 42rpx;
		background-image: url("../../static/img/addqq.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	ul li:last-child {
		margin-bottom: 25rpx;
	}

	.b1 {
		position: relative;
		font-weight: 700;
		font-size: 18px;
	}

	.b1 img {
		width: 80rpx;
		height: 80rpx;
	}

	.b2 {
		position: relative;
		font-weight: 700;
		font-size: 18px;
	}

	.b2::before,
	.b2::after {
		position: absolute;
		content: '';
		background-color: #cccccc;
		width: 0px;
		height: 13px;
		border: 1px solid;
		right: 39%;
		top: 2px;
		z-index: 777;
		color: red;
	}

	.b2::before {
		transform: rotate(45deg);
	}

	.b2::after {
		transform: rotate(-45deg);
	}


	.notcontent {
		color: red !important;
	}
</style>

<style>
	.image-box {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 2px 0;
	}
	
	.give {
		background-color: #f1e5d6;
	}

	/deep/ .uni-collapse-item {
		background-color: #f1e5d6;
	}

	/deep/ .uni-collapse-item__title-box {
		background-color: #f1e5d6;
	}

	/deep/ .uniui-bottom:before {
		/* content: "点击展开"; */
	}
	
	/deep/ .is--transition {
		background-color: #f1e5d6;
	}
	
	/deep/ .uni-collapse-item__title-text {
		/* color: red; */
	}
	
	uni-image {
		height: 360px !important;
	}
	
	/deep/ .image-vertical  {
		height: 360px !important;
	}
	.content {
		font-size: 18px;
	}
</style>